<template>
  <div class="material-quotation-wrap table-gl-w">
    <div class="search-w table-filter-form">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getTableList">
        <template #headerLeft>
          <a-space>
            <a-button type="primary" size="medium" @click="openEditQuote(1)">新增报价</a-button>
            <a-button class="gray-outline" size="medium" @click="deleteQuote">删除报价</a-button>
            <a-button type="text" @click="toOtherUrl">查看国内贵金属现货行情 </a-button>
          </a-space>
        </template>
        <template #tableBody>
          <a-table
            class="table-two-line show-border-table"
            ref="tableRef"
            row-key="id"
            :loading="tableLoading"
            @selection-change="selectColumn"
            :row-selection="rowSelection"
            :data="tableList"
            :scroll="{
              x: '100%',
              y: '100%',
            }"
            size="mini"
            :pagination="false"
          >
            <template #columns>
              <a-table-column data-index="sort1" title="序号" :width="45">
                <template #cell="{ rowIndex }">
                  <p>{{ rowIndex + 1 }}</p>
                </template>
              </a-table-column>
              <a-table-column data-index="sort" title="材质" :width="200">
                <template #cell="{ record }">
                  <div class="flex-c">
                    <ImgPopover :src="record.productImg">
                      <template #con>
                        <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                      </template>
                    </ImgPopover>
                    <div class="product-detail">
                      <p class="name">{{ record.productName }}</p>
                      <p class="sku">{{ record.sku }}</p>
                    </div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column data-index="unit" title="计量单位" :width="80" />
              <a-table-column data-index="quotePrice" title="今日最新报价(CNY)" :width="140" />
              <a-table-column data-index="beforeQuotePrice" title="昨日报价(CNY)" :width="100" />
              <a-table-column data-index="formula" title="自动报价公式" :width="120">
                <template #cell="{ record }">
                  <p v-if="record.formula1">
                    <span>{ </span>
                    <span>{{ `${record.formula1Name}${record.formula2} (${record.formula3}${record.formula4}${record.formula5}) ${record.formula6}${record.formula7}` }}</span>
                    <span> }</span>
                  </p>
                  <p v-else>--</p>
                </template>
              </a-table-column>
              <a-table-column data-index="display" title="是否列表显示" :width="100">
                <template #cell="{ record }">
                  <p>{{ record.display ? '是' : '否' }}</p>
                </template>
              </a-table-column>
              <a-table-column data-index="sort" title="显示排序" :width="80" />
              <a-table-column data-index="handle" title="操作" :width="120">
                <template #cell="{ record }">
                  <a-space>
                    <a-button size="mini" type="text" @click="openEditQuote(2, record)">设置报价</a-button>
                    <a-button size="mini" type="text" @click="openChartDialog(record)">历史报价</a-button>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
    </div>
  </div>
  <!-- 新增编辑报价 -->
  <AddAndEditQuote v-if="showEditQuote" :isShow="showEditQuote" :currentItem="currentData" :quoteList="tableList" @closed="showEditQuote = false" @success="getTableList" />
  <!-- 历史报价 -->
  <QuoteChart v-if="showChartDialog" :isShow="showChartDialog" :currentItem="currentData" @closed="showChartDialog = false" />
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { FilterTableItem } from '@/types/components'
  import { findMaterialQuotePage, deleteMaterialQuote } from '@/api/system'
  import AddAndEditQuote from './components/addAndEditQuote.vue'
  import QuoteChart from './components/quoteChart.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  onMounted(getTableList)
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  }) as any
  const filterItem = ref<Array<FilterTableItem>>([
    {
      type: 'input_search',
      key: 'productName',

      value: ref(),
      label: '材质名称',
      width: 240,
    },
  ])
  const filterData = ref<any>({})
  const tableRef = ref()
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])
  const selectIds = ref([])
  const currentData = ref<any>({})
  const showEditQuote = ref(false)
  const showChartDialog = ref(false)

  function selectColumn(val: any) {
    selectIds.value = val
  }
  // 通过条件查询列表
  function searchByVal(info: any) {
    filterData.value = JSON.parse(JSON.stringify(info)) || {}
    getTableList()
  }
  // 获取列表
  async function getTableList() {
    let params = {
      pageNum: 1,
      pageSize: 500,
      ...filterData.value,
    }
    tableRef.value.selectAll(false)
    tableLoading.value = true
    const res: any = await findMaterialQuotePage(params)
    tableLoading.value = false
    tableList.value = res?.data?.records || []
  }
  // 打开新增和编辑报价弹窗
  function openEditQuote(type: number, item?: any) {
    currentData.value = type === 1 ? {} : item
    showEditQuote.value = true
  }
  // 打开历史报价
  function openChartDialog(item: any) {
    currentData.value = item
    showChartDialog.value = true
  }
  // 删除报价
  async function deleteQuote() {
    if (!selectIds.value.length) {
      Message.error('请选择需要删除的报价')
      return
    }
    Modal.warning({
      title: '删除',
      content: '再次确认删除选中的报价',
      cancelText: '取消',
      okText: '确认',
      titleAlign: 'start',
      hideCancel: false,
      onOk: async () => {
        let res: any = await deleteMaterialQuote({ ids: selectIds.value })
        if (res) {
          Message.success('删除成功')
          getTableList()
        }
      },
    })
  }
  //查看国内贵金属现货行情
  function toOtherUrl() {
    window.open('https://i.jzj9999.com/quoteh5/', '_block')
  }
</script>

<style lang="less" scoped>
  .product-detail {
    flex: 1;
    margin-left: 5px;
    .name {
      font-weight: bold;
    }
  }
</style>
